<template>
	<view>
		<view @tap="showModal" data-target="Modal" class="subscription_button" >{{text}}	
		</view>
		
		<view class="cu-bar bg-white margin-top">
		</view>
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">Modal标题</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					Modal 内容。
				</view>
			</view>
		</view>
		
	</view>
</template>·

<script>
	export default {
		name:"logo",
		props:{
			text:{
				type: String,
				default:0,
				required:true	
			}
			
		},
		data() {
			return {
				modalName: null,
			};
		},
		methods:{
			showModal(e) {
				console.log(1111,e.currentTarget.dataset.target)
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
		}
	}
</script>

<style lang="scss">
	.subscription_button {
		border-radius: 8rpx;
		// border-width: 1rpx;
		// border-style: solid;
		background-color: $buttton-color-one;
		text-align: center;
		height: 94rpx;
		width: 690rpx;
		line-height: 90rpx;
		color: #FFFFFF;
		font-size: 30rpx;
	}
	.cu-modal{
		display: none;
	}
	.cu-modal.show{
		display: block;
	}
</style>
